<template>
  <view class="pagebox">
    <div class="si">
      <p class="si_title rpx40 col282">请确认以下店铺信息</p>
      <div class="si_it" v-for="(item,index) in infos" :key="index">
        <p class="col666 rpx28">{{item.name}}</p>
        <p class="col999 rpx28">{{item.val}}</p>
      </div>
    </div>

    <div class="daka">
      <div class="diwei">
        <img src="static/s6.png" />
        <p class="col333 rpx32">到店签到</p>
        <p class="dk_tx col999 rpx28 omit1">{{address}}</p>
        <navigator class="dk_map col4E97F3 rpx268" @click="location">重新定位</navigator>
      </div>
      <navigator v-if="clockMessage==''" class="dk_btn colfff rpx32" @click="clock">在线打卡</navigator>
      <div v-else class="cl">{{clockMessage}}</div>
      <p class="dk_time col999 rpx26">{{time}}</p>
    </div>

    <navigator
      class="but88 rpx32 colfff app_bg"
      :url="'lixian_steps?shopId='+infos[0].val+'&catId='+catId"
    >样本上传列表</navigator>
    <navigator class="pto rpx32 colfff" @click="getImg">
      <img src="static/s8.png" />
      拍照
    </navigator>
    <div class="img" v-if="imgs!=[]" v-for="(item,index) in imgs" :key="index">
      <image class="content" :src="item" />
      <img class="close" @click="delImg(index)" src="../../static/q6.png" />
    </div>
    <uni-popup ref="popup" type="center">获取定位失败</uni-popup>
  </view>
</template>

<script>
import mixins from "@/mixins";
import { getCurrentDate } from "@/mixins/util";
import ntfy from "../../components/ntfy/index.vue";
import { uniPopup } from "@dcloudio/uni-ui";
export default {
  // mixins: [mixins],
  components: { ntfy, uniPopup },
  data() {
    return {
      infos: [
        { name: "店铺编号", val: "" },
        { name: "省，城市", val: "" },
        { name: "pop_id", val: "" },
        { name: "渠道", val: "" },
        { name: "店名", val: "" },
        { name: "地址", val: "" }
      ],
      time: "",
      catId: "",
      address: "",
      imgs: [],
      clockMessage:''
    };
  },
  onBackPress(options) {
    mixins.navigate("index", "reLaunch");
    return true;
    // console.log(options)
    // if (options.from === 'navigateBack') {
    // 	return true;
    // }
    // // this.back();
    // return true;
  },
  onLoad(e) {
    //当前时间
    this.time = getCurrentDate();
    //本地获取店铺信息
    uni.getStorage({
      key: "allShop",
      success: res => {
        res.data.forEach(element => {
          if (element.shop_id == e.id) {
            this.infos[0].val = element.shop_id;
            this.infos[1].val = element.province_name + element.city_name;
            this.infos[2].val = element.pop;
            this.infos[3].val = element.cat_name;
            this.infos[4].val = element.shop_name;
            this.infos[5].val = element.address;
            this.catId = element.cat_id;
          }
        });
      }
    });
    //初始化定位
    this.location();
    uni.getStorage({
      key: "imgs",
      success: res => {
        this.imgs = res.data;
      }
    });
  },
  methods: {
    clock(){
      this.clockMessage = "已打卡: "+this.address+"  "+this.time
    },
    location() {
      //获取当前定位
      uni.getLocation({
        // 默认为 wgs84 返回 gps 坐标，
        // gcj02 返回国测局坐标，可用于 uni.openLocation 的坐标
        type: "wgs84",
        geocode: true,
        success: data => {
          this.address = data.address.poiName;
        },
        fail: err => {
          this.$refs.popup.open();
          setTimeout(() => {
            this.$refs.popup.close();
          }, 1000);
        }
      });
    },
    getImg() {
      let _that = this;
      //获取图片
      uni.chooseImage({
        count: 99, //默认9
        sizeType: ["compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["camera"], //从相册选择
        success: function(res) {
          console.log(res);
          var imagePathArr = res.tempFilePaths;
          _that.imgs.push(imagePathArr[0]);
          uni.setStorage({
            key: "imgs",
            data: _that.imgs
          });
          for (let i = 0; i < imagePathArr.length; i++) {
            uni.uploadFile({
              url: "http://caco.winhui.net/api/v1/upload/imgUpload",
              fileType: "file",
              filePath: imagePathArr[i],
              name: "photo[]",
              success: function(res) {
                console.log(JSON.parse(res.data).data[0]);
              },
              fail: function(res) {
                console.log(res);
              }
            });
          }
        }
      });
    },
    delImg(index) {
      this.imgs.splice(index, 1);
      uni.setStorage({
        key: "imgs",
        data: this.imgs
      });
    }
  }
};
</script>

<style scoped>
.cl{
    margin: 68upx auto 0;
    height: 88upx;
    text-align: center;
    font-size: 34upx;
    color: #0082fb;
}
.img {
  display: block;
  text-align: center;
  position: relative;
}
.content {
  border-radius: 40upx;
  margin-bottom: 20upx;
}
.close {
  position: absolute;
  top: -24upx;
  right: 22upx;
  width: 70upx;
  height: 70upx;
}
.si {
  background: #fff;
  padding: 47upx 0 40upx;
  border-bottom: 1px solid #dcdcdc;
}
.si_title {
  margin-left: 30upx;
}
.si_it {
  margin: 36upx 34upx 0 47upx;
  height: 30upx;
  line-height: 30upx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.daka {
  margin: 30upx 24upx 0;
  height: 300upx;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(220, 220, 220, 1);
  border-radius: 16upx;
}
.dk_btn {
  margin: 68upx auto 0;
  width: 210upx;
  height: 88upx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 130, 251, 1);
  border-radius: 16upx;
}
.dk_time {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 26upx;
  margin: 30upx auto;
}
.diwei {
  position: relative;
  display: flex;
  align-items: center;
  height: 40upx;
  margin: 23upx 17upx 0 17upx;
}
.dk_tx {
  padding-left: 20upx;
  border-left: 1px solid #999;
  height: 32upx;
  line-height: 32upx;
  margin-left: 28upx;
  max-width: 300upx;
}
.diwei img {
  display: block;
  width: 40upx;
  height: 40upx;
  margin-right: 11upx;
}
.dk_map {
  position: absolute;
  line-height: 40upx;
  height: 40upx;
  right: 23upx;
  top: 03upx;
}

.pto {
  width: 210upx;
  height: 88upx;
  background: rgba(251, 171, 0, 1);
  border-radius: 16upx;
  margin: 47upx auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pto img {
  width: 40upx;
  height: 40upx;
  margin-right: 20upx;
}
</style>
